<template>
	<!-- 文件夹点击 > 笔记详情列表 -->
	<view class="cs-file-detail">
		<!-- 笔记列表 -->
		<view class="cs-note-ul" v-if="note_list.length > 0">
			<view class="cs-note-ul-li" v-for="(item,index) in note_list" :key='index' @click="linkNoteDetail(index)">
				<view class="li-tc">
					<!-- 操作 -->
					<view v-if="btnArr.length > 1">
						<checkbox-group @change='changeCheckbox(index, $event)'>
							<checkbox :value="item.unid+''" color="#00D5A2" style="transform:scale(0.7);" :checked="item.checked"/><text></text>
						</checkbox-group>
					</view>
					<view>
						<view class="li-tc-tc">{{item.notes_title}}</view>
						<view class="li-tc-date">{{item.Time}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 无数据 -->
		<v-none v-if='note_list.length <= 0' :none_msg='none_msg'></v-none>
		<!-- 操作模块 -->
		<v-opeartion v-if='btnArr.length > 0 && noteType == 1' :btn_arr='btnArr' @opearTion='opearTion'></v-opeartion>
	</view>
</template>

<script>
	import none from '../components/Base-none'; //无数据操作
	import opeartion from '../components/Base-opeartion'
	export default {
		components: {
			vNone: none,
			vOpeartion: opeartion
		},
		// 原生导航栏操作
		onNavigationBarButtonTap() {
			this.isOpeartion = !this.isOpeartion // 反转开关 true为操作 false为取消
			// #ifdef APP-PLUS || MP-WEIXIN
			let webView = this.$mp.page.$getAppWebview();
			let title = this.isOpeartion ? '取消' : '操作'
			webView.setTitleNViewButtonStyle(0,{
				text: title
			})
			// #endif
			if (this.isOpeartion) {
				this.btnArr = [
					{title: '删除',icon: 'iconshanchu1'},
					{title: '移动',icon: 'iconyidongzhi'}
				]
			} else {
				this.btnArr = [{title: '新建笔记',icon: 'icongengduocaozuo'}],
				this.note_list.forEach((item,index) => { // 取消时也要将原来的选择状态取消了
					this.note_list[index].checked = false 
				})
			}
		},
		data() {
			return {
				noteType: uni.getStorageSync('noteType'), //1家长 2孩子 
				stuId: uni.getStorageSync('userInfo').id, //个人ID
				unid: '', // 文件夹ID
				note_list: [], // 笔记列表
				fileList: [], //文件夹列表
				btnArr: [ // 底部操作列表
					{title: '新建笔记',icon: 'icongengduocaozuo'}
				],
				none_msg: '还没有上传内容~', //无数据弹窗提示内容
				isOpeartion: false // 操作开关
			}
		},
		onShow() {
			uni.showLoading({
				title: '加载中...'
			})
			// 如果是后退过来时则应该重置当前的操作状态
			this.btnArr = [ {title: '新建笔记',icon: 'icongengduocaozuo'}];
			this.isOpeartion = false;
			this.note_list = [];
			this.getList();
		},
		onLoad(e) {
			this.unid = e.unid;
			if(this.noteType == 2) {
				this.stuId = uni.getStorageSync('currentChild').student_id;
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0,{
					text: '',
					width: 0
				})
			}
			uni.setNavigationBarTitle({
				title: e.name
			})
		},
		methods: {
			// 获取文件夹笔记
			getList() {
				var result = {usr_id: this.stuId,limit: 999,folder_id:this.unid,notes_type:4}
				this.$kbapi.apiPost('mobile/notes/infos',result).then(res=>{
					if(res.data.code == 200 && res.data.data.list.length > 0) {
						var list = res.data.data.list;
						list.forEach((item,key)=>{
							item.checked = false;
							item.Time = item.create_time.substr(0,16);
						})
						this.note_list = list;
					} else {
						this.note_list = [];
					}
					uni.hideLoading();
				})
			},
			// 复选框监听
			changeCheckbox(index, event) {
				this.note_list[index].checked = !this.note_list[index].checked // 反转状态，以便后续获取ID
			},
			// 操作
 			opearTion(title) {
				var arr = [];
				var array = [];
				this.note_list.forEach((item,key)=>{
					if(item.checked) {
						arr.push(item.unid);
						array.push(item);
					}
				})
				var ids = arr.join(',');
				switch (title) {
					case '新建笔记':
						// 将目录ID带过去
						uni.navigateTo({
							url: `./tabs-note-create?folderId=${this.unid}`
						})
					break;
					case '删除':
						if (array.length <= 0) return this.showToast('至少选择一个吧~')
						uni.showModal({
							title: '提示',
							content: '确定删除所选笔记？',
							success: res => {
								if (res.confirm) {
									this.$kbapi.apiPost('mobile/notes/delete',{unid:ids,usr_id:this.stuId}).then(res=>{
										if(res.data.code == 200) {
											for(var i = 0; i < this.note_list.length; i++) {
												arr.forEach((val,index)=>{
													if(this.note_list[i].unid == val) {
														this.note_list.splice(i--,1);
													}
												})
											}
											this.$forceUpdate();
										} else {
											this.showToast(res.data.message);
										}
									})
								}
							}
						})
					break;
					case '移动':
						if (array.length <= 0) return this.showToast('至少选择一个吧~')
						uni.setStorageSync('noteIdArr', array)
						// 跳转移动文件夹
						uni.navigateTo({
							url: './tabs-file-detail_move?unid='+this.unid
						})
					break;
				}
			},
			// 查看笔记详情
			linkNoteDetail(index) {
				// 跳转之前将当前对应笔记ID带过去
				let unid = this.note_list[index].unid;
				if(!this.isOpeartion) {
					uni.navigateTo({
						url: `tabs-note-detail?unid=${unid}`
					});
				}
			},
			/* 提示方法 */
			showToast(title,icon,time) {
				var icons = 'none';
				var duration = 1500;
				if(icon) {
					icons = icon;
				}
				if(time) {
					duration = time;
				}
				uni.showToast({
					title: title,
					icon: icons,
					mask: true,
					duration: duration
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}
	/* #ifdef APP-PLUS ||MP-WEIXIN */
	checkbox .wx-checkbox-input {
		bottom: none;
		border-radius: 50% !important;
	}
	/* #endif */
	// 笔记列表容器
	.cs-note-ul{
		margin: 20upx 30upx;
	}
	// 笔记列表
	.cs-note-ul-li{
		display: flex;
		margin-top: 20upx;
		padding: 12upx 20upx 14upx 20upx;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		border-radius: 8upx;
		background: #FFFFFF;
	}
	.cs-note-ul-li:last-child {
		margin-bottom: 120upx;
	}
	.li-tc{
		display: flex;
		align-items: center;
	}
	// 标题
	.li-tc-tc{
		font-size: 32upx;
		color: #333333;
	}
	.li-tc-date{
		font-size: 24upx;
		color: #C2C2C2;
	}
	// 图片
	.li-img_x{
		width: 84upx;
		height: 84upx;
	}
	.li-img_x-img{
		width:100%;
		height: 100%;
	}
</style>
